<template>
  <div>
    <common-head title="商品详情" />
    <div class="wrap">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <h5>{{ basicInfo.name }}</h5>
      <div class="content" v-html="_content"></div>
    </div>
    <!-- 商品行动栏 -->
    <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="home-o" text="首页" />
      <van-goods-action-icon icon="cart-o" @click="$router.push('/cart')" text="购物车" :badge="$store.state.cart.items.length||''" />
      <van-goods-action-button @click="showSku(1)" type="warning" text="加入购物车" />
      <van-goods-action-button @click="showSku(2)" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品行动栏 -->
    <!-- 商品弹出规格层 -->
    <van-popup v-model="show" position="bottom" closeable round :style="{ height: '30%' }">
      <div class="item-sku">
        <van-card
          :num="sku.num"
          :price="2.00"
          :title="sku.name"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #footer>
            <van-stepper v-model="sku.num" />
            <van-button @click="action" size="large" type="danger" style="margin-top:5px" round>确定</van-button>
          </template>
        </van-card>
      </div>
    </van-popup>
    <!-- /商品规格 sku -->
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchItemDetail } from '@api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      basicInfo: {},
      pics: [],
      content: '',
      show: false,
      sku: {
        // 商品规格 提交购物车 提交订单页
      },
      actionCode: 1 // 1加入购物车 2 立即购买
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    action () {
      // 点击商品弹出层确定按钮
      if (this.actionCode === 1) {
        this.$store.commit('cart/add_cart', this.sku)
        Toast('加入购物车成功，请前往购买吧')
        this.show = false
      } else {
        alert('立即购买')
      }
    },
    showSku (n) {
      // 点击弹出商品规格
      this.show = true
      this.actionCode = n
    },
    fetchDetail () {
      // 请求商品详情数据
      fetchItemDetail(this.$route.query.id).then((res) => {
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content
          this.sku = {
            ...res.data.data.basicInfo,
            num: 1, // 购买数量
            checked: true
          }
        }
      })
    }
  },
  computed: {
    _content () {
      return this.content.replace(
        /<img/g,
        '<img style="display:block;width:100%"'
      )
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  margin-top: 46px;
  margin-bottom: 50px;
  .my-swipe {
    img {
      width: 100%;
    }
  }
}

.item-sku{
  height: 100%;
  padding-top: 15px;
  box-sizing: border-box;
  background-color: #fafafa;
}
</style>
